<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row class="nav">
      <el-button type="text" size="small" :class="active === 0 ? 'active' : ''" @click="active = 0">订单数据明细</el-button>
      <!-- <el-button type="text" size="small" :class="active === 1 ? 'active' : ''" @click="active = 1">订单数据汇总</el-button> -->
      <el-button type="text" size="small" :class="active === 2 ? 'active' : ''" @click="active = 2">订单数据排行</el-button>
    </el-row>
    <el-row>
      <item-list v-if="active === 0"></item-list>
      <item-total v-else-if="active === 1"></item-total>
      <item-sort v-else-if="active === 2"></item-sort>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import ItemList from './components/list'
import ItemTotal from './components/total'
import ItemSort from './components/sort'
export default {
  name: 'order',
  components: {
    Breadcrumb,
    ItemList,
    ItemTotal,
    ItemSort
  },
  data() {
    return {
      active: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.nav{
  .active{
    color: #fff !important;
    background: #ffae00 !important;
  }
  .el-button{
    padding: 5px 15px;
    border-radius: unset;
    background: #d2d2d2;
    color: #666;
  }
}
</style>
